<template>
  <div class="news">
    <company-home-content-layout>
      <template slot="menu">
        <menu-c :menu="category" @getSelectId="changeType" />
      </template>
      <template>
        <router-view v-if="$route.name === 'CompanyHomeNewsDetails'" />
        <div v-if="$route.name === 'CompanyHomeNews'" class="news-content">
          <div class="img-title">
            <div class="img-and-title">
              <img class="img" src="~/assets/images/menu-news-all.png" alt="" />
              <span class="title">新闻列表</span>
            </div>
            <div class="line"></div>
          </div>
          <div class="list">
            <div
              class="item cursor transition"
              v-for="(item, index) in list"
              :key="index"
              @click="goDetail(item.article_id)"
            >
              <div class="pic">
                <img :src="item.image_input" class="objectCover" />
              </div>
              <div class="_content">
                <div class="title textBold">{{ item.title }}</div>
                <div class="text">{{ item.synopsis }}</div>
                <div class="foot">
                  <div class="time">
                    <img src="~/assets/images/time-active.png" class="acIcon" />
                    <img src="~/assets/images/time.png" class="deIcon" />
                    时间：{{ item.create_time }}
                  </div>
                  <div class="views">
                    <img src="~/assets/images/read-active.png" class="acIcon" />
                    <img src="~/assets/images/read.png" class="deIcon" />
                    {{ item.visit || 0 }}人已读
                  </div>
                </div>
              </div>
              <div class="top">置顶</div>
              <m-button class="check" type="light" width="117">
                <span> 查看</span>
              </m-button>
            </div>
            <nodata message="该企业暂未入驻，请联系厂家或者平台" :status="listStatus"></nodata>
          </div>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
      </template>
    </company-home-content-layout>
  </div>
</template>

<script>
import CompanyHomeContentLayout from "@/components/common/company-home-content-layout/company-home-content-layout"
import MenuC from "@/views/company-home/children/MenuC"
import MButton from "@/components/common/m-button/MButton"
import MPagination from "@/components/common/m-pagination/MPagination"
import { getNewsCategoryMer, getNewsListMer } from "@/request/api"

export default {
  name: "news",
  components: { MPagination, MButton, MenuC, CompanyHomeContentLayout },
  data() {
    return {
      id: "",
      cid: "",
      category: [],
      list: [],
      page: 1,
      listStatus: 0,
      total: 0,
      limit: 10
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getCategory()
  },
  methods: {
    changeType(id) {
      this.cid = id
      this.page = 1
      this.getList()
      if (this.$route.name == "CompanyHomeNewsDetails") {
        this.$router.push({ path: "/company-home/news/" + this.id })
      }
    },
    getCategory() {
      getNewsCategoryMer(this.id).then((res) => {
          this.category = res.data
          this.cid = this.category[0] ? this.category[0].article_category_id : ""
          if (this.cid) {
            this.getList()
          }
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        cid: this.cid,
        mer_id: this.id,
        page: this.page,
        limit: this.limit
      }
      getNewsListMer(data).then((res) => {
          this.list = res.data.list
          this.total = res.data.length
          if (this.total == 0) {
            this.listStatus = 0
          } else {
            this.listStatus = 2
          }
          window.scrollTo({ top: 0 })
        })
        .catch((err) => {
          this.listStatus = 0
          this.$message.error(err.message)
        });
    },
    goDetail(id) {
      this.$router.push({
        path: "/company-home/news/details/" + id + "/" + this.id,
      });
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .el-menu-item {
  border-bottom: 1px solid #eee;
}
.news {
  .news-content {
    background-color: #fff;
    padding: 25px 25px;

    .img-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;

      .img-and-title {
        width: 130px;

        .title {
          font-size: 20px;
          color: #666;
          font-weight: bold;
        }

        .img {
          margin-right: 10px;
          /* width: 30px;
          height: 30px;
          object-fit: cover; */
        }
      }

      .line {
        width: calc(100% - 130px);
        height: 1px;
        background-color: #eaeaea;
      }
    }

    .list {
      .item {
        width: 100%;
        height: 180px;
        padding: 15px;
        background-color: rgb(243, 244, 247);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        position: relative;
        .acIcon {
          display: none;
        }
        .pic {
          width: 260px;
          height: 100%;
          background-color: pink;
          margin-right: 30px;
        }

        ._content {
          width: calc(90% - 280px);
          height: 100%;
          font-size: 14px;
          color: #666666;
          line-height: 22px;
          padding: 15px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 16px;
          }

          .foot {
            display: flex;
            align-items: center;
            color: #969696;

            .time {
              margin-right: 30px;
              display: flex;
              align-items: center;

              img {
                margin-right: 5px;
              }
            }

            .views {
              display: flex;
              align-items: center;

              img {
                margin-right: 5px;
              }
            }
          }
        }

        .top {
          display: none;
          width: 60px;
          height: 25px;
          border-radius: 12.5px;
          color: #fff;
          line-height: 25px;
          text-align: center;
          background-color: rgb(62, 172, 218);
          position: absolute;
          top: 15px;
          right: 15px;
          cursor: pointer;
        }

        .check {
          position: absolute;
          right: 15px;
          bottom: 15px;
        }
      }
      .item:nth-of-type(1) .top {
        display: block;
      }
      .item:hover {
        background-color: $theme-color-1;
        .acIcon {
          display: inline-block;
        }
        .deIcon {
          display: none;
        }
        ._content {
          color: #fff;

          .foot {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
